import React, { useEffect, useRef, useState } from 'react';
import {
  PlusOutlined,
  EllipsisOutlined,
  ClockCircleOutlined,
} from '@ant-design/icons';
import {
  Button,
  Tag,
  Space,
  Card,
  Empty,
  Select,
  Spin,
  Breadcrumb,
} from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProCard, { StatisticCard } from '@ant-design/pro-card';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import ProLayout, {
  PageContainer,
  SettingDrawer,
} from '@ant-design/pro-layout';
import TeamColumChart from './component/TeamColumChart';
import request from 'umi-request';
import { useRequest } from 'umi';
import styles from './index.less';
import { Chrono } from 'react-chrono';
import BarChart from './component/BarChart';
import HomeLineChart from '@/pages/Home/component/HomeLineChart';
import PieChart from './component/PieChart';

const { Option } = Select;
const { Statistic, Divider } = StatisticCard;

type GithubIssueItem = {
  url: string;
  id: number;
  number: number;
  title: string;
  labels: {
    name: string;
    color: string;
  }[];
  state: string;
  comments: number;
  created_at: string;
  updated_at: string;
  closed_at?: string;
};

export default (props: any) => {
  const [tableName, setTableName] = useState('论文');
  const [boardData, setBoardData] = useState<any>({});
  const [pieData, setPieData] = useState();
  const [chartData, setChartData] = useState<any>(false);
  const [tabelNameList, setTableNameList] = useState([
    '论文',
    '专著',
    '专利',
    '奖励',
    '纵向项目',
    '横向项目',
    '成果转换',
  ]);

  //团队看板
  const getGroupBoard = useRequest(
    (groupId = null) => {
      return {
        url: `http://10.1.40.84:9993/board/getGroupBoard?groupId=${groupId}`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
      };
    },
    {
      manual: true,
    },
  );

  useEffect(() => {
    if (props.groupId) {
      getGroupBoard.run(props.groupId).then((data) => {
        setBoardData(data);
        setChartData(data.chart);
        setPieData(
          data?.detail?.filter(
            (e: any) => e.tableName === tableName && e.value,
          ),
        );
      });
    }
  }, [props.groupId]);

  useEffect(() => {
    var temp: any = [];
    temp = boardData?.detail?.filter(
      (e: any) => e.tableName === tableName && e.value,
    );
    setPieData(temp);
  }, [tableName]);

  return props.groupId ? (
    <Spin spinning={getGroupBoard.loading}>
      <ProCard
        title="子方向总体概况"
        split={'vertical'}
        headerBordered
        bordered
        loading={getGroupBoard?.loading}
      >
        <ProCard split="horizontal" colSpan={24}>
          <ProCard split="vertical">
            <StatisticCard
              statistic={{
                title: '论文数量',
                value: chartData?.paper,
              }}
            />
            <StatisticCard
              statistic={{
                title: '纵向项目数量',
                value:
                  (chartData?.vertProject?.overcount || '0') +
                  '/' +
                  (chartData?.vertProject?.undercount || '0'),
                description: (
                  <Statistic
                    title="到账"
                    value={chartData?.vertProject?.money}
                    suffix={'万元'}
                    valueStyle={{ color: 'red' }}
                  />
                ),
              }}
            />
            <StatisticCard
              statistic={{
                title: '横向项目数量',
                value:
                  chartData?.horProject?.overcount ||
                  '0' + '/' + (chartData?.horProject?.undercount || '0'),
                description: (
                  <Statistic
                    title="到账"
                    value={chartData?.horProject?.money}
                    suffix={'万元'}
                    valueStyle={{ color: 'red' }}
                  />
                ),
              }}
            />
            <StatisticCard
              statistic={{
                title: '国际合作项目数数量',
                value: 0 + '/' + 0,
                description: (
                  <Statistic
                    title="到账"
                    value={0}
                    suffix={'万元'}
                    valueStyle={{ color: 'red' }}
                  />
                ),
              }}
            />
            <StatisticCard
              statistic={{
                title: '软件著作',
                value: chartData.softwareCopyright,
              }}
            />
          </ProCard>
          <ProCard split="vertical">
            <StatisticCard
              statistic={{
                title: '专著',
                value: chartData?.book,
                suffix: '',
              }}
            />
            <StatisticCard
              statistic={{
                title: '制定标准',
                value: 0,
                suffix: '',
              }}
            />
            <StatisticCard
              statistic={{
                title: '获得奖项',
                value: chartData?.reward,
                suffix: '',
              }}
            />
            <StatisticCard
              statistic={{
                title: '申请专利',
                value: chartData?.patent,
                suffix: '',
              }}
            />
            <StatisticCard
              statistic={{
                title: '授权专利',
                value: chartData?.grantPatent,
                suffix: '',
              }}
            />
          </ProCard>
          <ProCard split="vertical">
            <StatisticCard
              statistic={{
                title: '人才称号',
                value: (chartData.省部级 || 0) + (chartData.国家级 || 0),
                description: (
                  <Space>
                    <Statistic
                      title="省部级"
                      value={chartData.省部级 || 0}
                      suffix={''}
                      valueStyle={{ color: 'red' }}
                    />
                    <Statistic
                      title="国家级"
                      value={chartData.国家级 || 0}
                      suffix={''}
                      valueStyle={{ color: 'red' }}
                    />
                  </Space>
                ),
              }}
            />
            <StatisticCard
              statistic={{
                title: '仪器设备研制',
                value: chartData.equipmentDevelop,
                suffix: '',
              }}
            />

            <StatisticCard
              statistic={{
                title: '成果转化',
                value: chartData.achieveTrans,
                suffix: '',
              }}
            />
            <StatisticCard
              statistic={{
                title: '年度标志性成果',
                value: chartData.yearProject,
                suffix: '',
              }}
            />
            <StatisticCard
              statistic={{
                title: '其他标志性成果',
                value: chartData.other,
                suffix: '',
              }}
            />
          </ProCard>
        </ProCard>
      </ProCard>
      <Divider />

      <ProCard split={'vertical'} style={{ width: '100%' }}>
        <StatisticCard
          statistic={{
            title: '高质量论文数量',
            value: 'Top 5',
            tip: '影响因子大于1',
            // suffix: '/ 100',
          }}
          chart={
            <BarChart
              data={boardData?.top?.topPaper
                .sort((a: any, b: any) => b.COUNT - a.COUNT)
                .slice(0, 5)}
            />
          }
        />
        <StatisticCard
          statistic={{
            title: '重大横向项目数量',
            value: 'Top 5',
            tip: '项目总经费大于10万元',
          }}
          chart={
            <BarChart
              data={boardData?.top?.topHorProject
                .sort((a: any, b: any) => b.COUNT - a.COUNT)
                .slice(0, 5)}
            />
          }
        />
        <StatisticCard
          statistic={{
            title: '重大纵向项目数量',
            value: 'Top 5',
            tip: '项目总经费大于10万元',
          }}
          chart={
            <BarChart
              data={boardData?.top?.topVerProject
                .sort((a: any, b: any) => b.COUNT - a.COUNT)
                .slice(0, 5)}
            />
          }
        />
      </ProCard>

      <Divider />
      <ProCard split={'vertical'} loading={getGroupBoard?.loading}>
        <ProCard split={'horizontal'} colSpan="65%">
          {/* <ProCard title="团队成果时间分布">
            <HomeLineChart />
          </ProCard> */}

          <ProCard title="子方向科研成果">
            <TeamColumChart
              data={boardData?.detail}
              xField={'realName'}
              yField={'value'}
              seriesField={'tableName'}
            />
          </ProCard>
        </ProCard>
        <ProCard split={'horizontal'} colSpan="35%">
          <ProCard
            title="成果占比"
            extra={
              <Space>
                <span>选择成果类型：</span>
                <Select
                  defaultValue={tableName}
                  style={{ width: 120 }}
                  onChange={(e) => {
                    setTableName(e);
                  }}
                >
                  {tabelNameList.map((e) => (
                    <Option key={e} value={e}>
                      {e}
                    </Option>
                  ))}
                </Select>
              </Space>
            }
          >
            {pieData ? (
              <PieChart
                data={pieData}
                angleField={'value'}
                colorField={'realName'}
              />
            ) : (
              ''
            )}
          </ProCard>
        </ProCard>
      </ProCard>
      <Divider />
    </Spin>
  ) : (
    <ProCard>
      <div style={{ height: 260 }}></div>
      <Divider />
      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      <Divider />
      <div style={{ height: 260 }}></div>
    </ProCard>
  );
};
